<!-- 巡查地图 -->
<template>
  <div class='map-wrapper'>
    <baidu-map class="bm-view" :mapClick="false" :center="center" @zoomend="syncCenterAndZoom" :scroll-wheel-zoom="true" @ready="handler" :zoom="zoom"  >
      <!-- 折线 -->
      <bm-polyline v-if="polylinePath.length>0" strokeStyle="solid" :stroke-opacity="0.8" :stroke-weight="10" :path="polylinePath" @lineupdate="updatePolylinePath"></bm-polyline>
      <!-- 自定义地图按钮 -->
      <bm-control style="margin:20px;">
        <el-select @change="selectChange" v-model="patrol.value" placeholder="请选择巡查人员">
          <el-option v-for="item in allWechatUser" :key="item.openId" :label="item.name" :value="item.openId">
          </el-option>
        </el-select>
        <el-date-picker v-model="patrol.date" type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
        <el-button type="default" @click="queryRoute">查 询</el-button>
      </bm-control>
    </baidu-map>
    <dataToast>巡查人员共巡查了{{totals}}处资产~</dataToast>

  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import mapConfig from "@/assets/custom_map_config.json";
import {
  getPosition,
  getWetchatAllUsers,
  getByPoint,
  getGUIDByPosition,
  getAssetByHidden,
  getAllCheckByOpenId
} from "@/api/map";
import DataToast from "../baiduMap/components/DataToast";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: { DataToast },
  data() {
    //这里存放数据
    return {
      zoom: 13,
      center: {},
      mapStyle: {
        styleJson: mapConfig
      },
      markers: [],
      baseURL: process.env.VUE_APP_BASE_API,
      patrol: { value: "", date: [] },
      allWechatUser: [],
      pointInfo: {},
      totals: 0,
      polylinePath: [
        // { lng: 105.4325634, lat: 28.227475 },
        // { lng: 105.5325634, lat: 28.327475 },
        // { lng: 105.6325634, lat: 28.427475 },
        // { lng: 105.7325634, lat: 28.527475 }
      ],
      icons: null,
      url: "",
      map: null
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    handler({ BMap, map }) {
      this.map = map;
      getPosition().then(res => {
        console.log("位置", res);
        this.center = { lng: res.lng, lat: res.lat };
      });
      getWetchatAllUsers().then(res => {
        this.allWechatUser = res;
      });
    },
    //地图缩放事件
    syncCenterAndZoom(e) {
      if (e.target.getZoom() < this.zoom) {
        this.zoom = e.target.getZoom(); //获取缩放等级
        console.log("缩放等级", this.zoom);
      }
    },
    infoWindowClose(item) {
      item.show = false;
    },
    infoWindowOpen(item) {
      item.show = true;
      let data = { lng: item.lng, lat: item.lat };
      getGUIDByPosition(data).then(res => {
        this.pointInfo = res.hidden;
        let data = { limit: 1000, offset: 0, hiddenGuid: res.guid };
        getAssetByHidden(data).then(res => {
          this.url = Object.values(res.fileBytes)[0];
        });
      });
    },
    markerClick(item) {},
    selectChange(value) {
      this.openId = value;
    },
    queryRoute() {
      if (this.patrol.date.length > 0) {
        let data = {
          openId: this.patrol.value,
          datepicker: this.patrol.date[0],
          datepicker2: this.patrol.date[1]
        };
        getAllCheckByOpenId(data).then(res => {
          this.polylinePath = res.rows;
          this.totals = res.total;
          //绘制箭头及其样式
          let sy = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {
            scale: 0.6, //图标缩放大小
            strokeColor: "#ffb62e", //设置矢量图标的线填充颜色
            // strokeColor: "#00FF00", //设置矢量图标的线填充颜色
            strokeWeight: 3 //设置线宽
          });
          let icons = new BMap.IconSequence(sy, "100%", "5%", false); //设置为true，可以对轨迹进行编辑
          // this.icons = icons;
          console.log("icons", icons);
          let trackLine = new BMap.Polyline(res.rows, {
            strokeColor: "#18a45b", //设置颜色
            // strokeWeight: 10, //宽度
            // strokeOpacity: 0.8, //折线的透明度，取值范围0 - 1
            // enableEditing: false, //是否启用线编辑，默认为false
            // enableClicking: false, //是否响应点击事件，默认为true
            icons: [icons]
          });
          this.map.addOverlay(trackLine);
          //绘制折线以及样式
        });
      }
    },
    updatePolylinePath(e) {
      console.log("覆盖物的属性发生 变化时", e.target.getPath());
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.bm-view {
  width: 100%;
  height: calc(100vh - 50px);
}
</style>